<template>
  <div>{{city}}</div>
  <button v-for="item of hots" :key="item" @click="handleCity(item)">{{item}}</button>
</template>

<script>
import { reactive, toRefs,computed } from '@vue/reactivity'
import {mapMutations} from 'vuex'
import {useStore} from 'vuex'
export default {
    setup(){
        const store = useStore();
        const state = reactive({
            hots:["上海","杭州","西安","洛阳"],
            // changeCity(val){
            //     console.log(val)
            //     // console.log(this.$store)
            //     this.$store.commit("changeCity",val);
            // }
            ...mapMutations(["changeCity"]),
            handleCity(city){
                this.changeCity(city);
                this.$router.back();
            },
            city:computed(()=>store.state.CityHook.city)
        })
        const refState = toRefs(state);
        return{
            ...refState
        }
    }
}
</script>

<style>

</style>